<template>
  <l-layout style="background: #f1f2f5" :left="240">
    <template #left>
      <l-panel title="列字段" style="padding: 8px 0 0 0">
        <el-tree
          @check="handleColumnsCheck"
          default-expand-all
          show-checkbox
          ref="maintree"
          node-key="id"
          :highlight-current="true"
          :data="columnsTree"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            {{ node.label }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-panel style="padding: 8px 0 0 4px">
      <template #toolLeft>
        <div class="l-panel--item" size="mini">
          <span style="margin-right: 8px">是否分页</span>
          <el-switch v-model="config.table.isPage"> </el-switch>
        </div>
        <div class="l-panel--item" size="mini">
          <span style="width: 80px">排序字段</span>
          <l-select size="mini" valueKey="prop" :options="columnsTree[0].children" v-model="config.table.sidx">
          </l-select>
        </div>
        <div class="l-panel--item" size="mini">
          <span style="width: 80px">是否倒序</span>
          <el-switch v-model="config.table.isDESC"> </el-switch>
        </div>
        <div class="l-panel--item" size="mini">
          <span style="width: 120px">是否设置表格列</span>
          <el-switch v-model="config.table.hasTableSetting"> </el-switch>
        </div>
      </template>
      <l-table
        style="height: 50%"
        :dataSource="config.table.columns"
        :columns="columns"
        :isSortable="true"
        rowKey="id"
        :isShowNum="false"
      >
        <template v-slot:form="scope">
          <div v-if="showSettingForm(scope.row)" class="settingForm">
            <label style="padding: 0 12px">参数绑定</label>
            <el-select size="mini" v-model="scope.row.formField">
              <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            <label style="padding: 0 12px">选择表单</label>
            <l-layer-select
              size="mini"
              v-model="scope.row.formLabel"
              labelKey="f_Name"
              valueKey="f_Id"
              :columns="apiColumns"
              @change="handleDataSourceChange($event, scope.row)"
              :loadPageData="loadPageData"
            >
              <template v-slot:f_FormType="scope">
                <el-tag v-if="scope.row.f_FormType == 1" size="mini" type="warning">视图表单</el-tag>
                <el-tag v-if="scope.row.f_FormType == 0" size="mini" type="success">常规表单</el-tag>
                <el-tag v-if="scope.row.f_FormType == 2" size="mini" type="success">接口模式</el-tag>
              </template>
            </l-layer-select>

            <label style="padding: 0 12px">是否编辑</label>
            <el-switch size="mini" v-model="scope.row.formEdit"> </el-switch>
          </div>
        </template>
        <template v-slot:label="scope">
          <el-input size="mini" v-model="scope.row.label"></el-input>
        </template>
        <template v-slot:width="scope">
          <el-input size="mini" v-model="scope.row.width"></el-input>
        </template>
        <template v-slot:isMinWidth="scope">
          <el-switch size="mini" v-model="scope.row.isMinWidth"> </el-switch>
        </template>
        <template v-slot:align="scope">
          <el-select size="mini" v-model="scope.row.align">
            <el-option
              v-for="item in [
                { value: 'left', label: '左' },
                { value: 'center', label: '中' },
                { value: 'right', label: '右' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </l-table>

      <l-edit-table
        v-if="config.table.customColumns"
        addBtnText="添加"
        :dataSource="customColumns"
        @addRow="showForm"
        :columns="columns"
        @deleteRow="deleteData"
      >
        <template v-slot:form="scope">
          <div v-if="showSettingForm(scope.row)" class="settingForm">
            <label style="padding: 0 12px">参数绑定</label>
            <el-select size="mini" v-model="scope.row.formField">
              <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            <label style="padding: 0 12px">选择表单</label>
            <l-layer-select
              size="mini"
              v-model="scope.row.formLabel"
              labelKey="f_Name"
              valueKey="f_Id"
              :columns="apiColumns"
              @change="handleDataSourceChange($event, scope.row)"
              :loadPageData="loadPageData"
            >
              <template v-slot:f_FormType="scope">
                <el-tag v-if="scope.row.f_FormType == 1" size="mini" type="warning">视图表单</el-tag>
                <el-tag v-if="scope.row.f_FormType == 0" size="mini" type="success">常规表单</el-tag>
                <el-tag v-if="scope.row.f_FormType == 2" size="mini" type="success">接口模式</el-tag>
              </template>
            </l-layer-select>

            <label style="padding: 0 12px">是否编辑</label>
            <el-switch size="mini" v-model="scope.row.formEdit"> </el-switch>
          </div>
        </template>
        <template v-slot:label="scope">
          <el-input size="mini" v-model="scope.row.label"></el-input>
        </template>
        <template v-slot:width="scope">
          <el-input size="mini" v-model="scope.row.width"></el-input>
        </template>
        <template v-slot:isMinWidth="scope">
          <el-switch size="mini" v-model="scope.row.isMinWidth"> </el-switch>
        </template>
        <template v-slot:align="scope">
          <el-select size="mini" v-model="scope.row.align">
            <el-option
              v-for="item in [
                { value: 'left', label: '左' },
                { value: 'center', label: '中' },
                { value: 'right', label: '右' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </l-edit-table>
    </l-panel>

    <!--对话框-->
    <l-dialog
      title="添加自定义列"
      :visible.sync="dialog"
      :width="400"
      :height="200"
      @closed="hideForm"
      @ok="customColumnsSave"
    >
      <el-form ref="form" style="width: 360px; padding: 20px" :model="customColumnsForm" size="mini" label-width="80px">
        <el-form-item label="列名">
          <el-input v-model="customColumnsForm.label"></el-input>
        </el-form-item>
        <el-form-item label="字段">
          <el-select v-if="tableFields.length" v-model="customColumnsForm.field" placeholder="请选择">
            <el-option v-for="item in tableFields" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
          <el-input v-else v-model="customColumnsForm.field"></el-input>
        </el-form-item>
      </el-form>
    </l-dialog>
    <!--对话框 end-->
  </l-layout>
</template>
<script>
const api = window.$api.custmerForm.scheme;
//hasTableSetting
export default {
  name: "webcode-columns",
  inject: ["formConfig"],
  props: ["columnsTree", "tableFields"],
  components: {},
  computed: {
    columnsAll() {
      return this.config.table.columns.concat(this.customColumns);
    },
    customColumns() {
      return this.config.table.customColumns || [];
    },
    config() {
      return this.formConfig;
    },
    fieldOptions() {
      return this.columnsAll.map((item) => {
        return {
          label: item.field,
          value: item.field,
        };
      });
    },
  },
  data() {
    return {
      columns: [
        { label: "列名", prop: "label", minWidth: "100" },
        { label: "字段", prop: "field", minWidth: "100" },
        { label: "设置表单链", prop: "form", minWidth: "300" },
        { label: "宽度", prop: "width", width: "120", align: "center" },
        { label: "自适应宽度", prop: "isMinWidth", width: "100", align: "center" },
        { label: "对齐", prop: "align", width: "100", align: "center" },
      ],
      apiColumns: [
        { label: "表单名称", prop: "f_Name", minWidth: "110" },
        { label: "表单类型", prop: "f_FormType", minWidth: "110" },
      ],
      dialog: false,
      customColumnsForm: {},
    };
  },

  created() {},
  methods: {
    showSettingForm(row) {
      return !["icon", "rate", "switch", "slider", "color", "file", "img", "upload", "uploadimg"].includes(row.type);
    },
    loadPageData(pageData) {
      return new Promise((resovle) => {
        api.getPage(pageData).then((res) => {
          const data = this.$deepClone(res.data.data);
          resovle(data);
        });
      });
    },
    handleDataSourceChange(data, row) {
      row.formLabel = data.f_Name;
      row.formValue = data.f_Id;
    },
    handleColumnsCheck($node, data) {
      const addCols = data.checkedNodes.filter(
        (t) => t.field != undefined && this.columnsAll.findIndex((t2) => t2.field == t.field) == -1
      );
      const removeCols = this.config.table.columns.filter(
        (t) => data.checkedNodes.findIndex((t2) => t2.prop == t.prop) == -1
      );

      if (removeCols.length > 0) {
        this.config.table.columns = this.config.table.columns.filter(
          (t) => removeCols.findIndex((t2) => t2.prop == t.prop) == -1
        );
      }

      if (addCols.length > 0) {
        this.config.table.columns.push(...addCols);
      }
    },
    setCheckedKeys(keys) {
      this.$refs.maintree.setCheckedKeys(keys);
    },
    showForm() {
      this.customColumnsForm = {};
      this.dialog = true;
    },
    hideForm() {
      this.dialog = false;
    },
    deleteData({ index }) {
      this.customColumns.splice(index, 1);
    },
    validateCustomColumnsSave(form) {
      return this.columnsAll.some((item) => item.field == form.field);
    },
    customColumnsSave() {
      const form = this.$deepClone(this.customColumnsForm);
      if (!(form.label && form.field)) {
        this.$message({
          type: "error",
          message: "列名和字段必填!",
        });
        return;
      }
      if (this.validateCustomColumnsSave(form)) {
        this.$message({
          type: "error",
          message: "存在重复字段!",
        });
        return;
      }
      this.customColumns.push({
        ...form,
        isMinWidth: false,
        align: "left",
        width: 120,
        formField: form.field,
        formEdit: false,
        formLabel: "",
        formValue: "",
      });
      this.hideForm();
    },
  },
};
</script>
<style scoped>
.settingForm {
  display: flex;
}
</style>
